<template>
  <el-button
    size="small"
    type="success"
    :plain="!curState"
    @click="answerCollection"
    :loading="loading"
  >
    <svg-icon v-show="!loading" icon-name="star-fill" />
    {{ curState ? '已收藏' : '收藏' }}
  </el-button>
</template>

<script>
import { formatComment } from '@/components/issues-answers/format';

export default {
  name: 'vote-collection',
  props: {
    comment: Object,
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    curState() { return this.comment.voteStates.collect; },
  },
  methods: {
    answerCollection() {
      this.loading = true;
      this.$api.other.vote({
        votePosition: 'Comment',
        votePositionId: this.comment.id,
        voteAction: 'collection',
        voteState: !this.curState,
      }).then((res) => {
        this.$emit('voted', formatComment(res.data));
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style></style>
